<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>RSA加密解密</title>
    <link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
    <link th:href="@{/plugins/layui/css/layui.css}" rel="stylesheet"/>
    <script th:src="@{/plugins/jquery/jquery.min.js}"></script>
    <script th:src="@{/plugins/particleground/jquery.particleground.min.js}"></script>

    <script th:src="@{/plugins/es6-promise/es6-promise.min.js}"></script>
    <script th:src="@{/plugins/es6-promise/es6-promise.auto.min.js}"></script>

    <script th:src="@{/plugins/layui/layui.js}"></script>
    <script th:src="@{/plugins/vue/vue.min.js}"></script>
    <script th:src="@{/plugins/dayjs/dayjs.min.js}"></script>
    <script th:src="@{/plugins/jsencrypt/jsencrypt.min.js}"></script>
    <script th:src="@{/plugins/crypto-js/crypto-js.js}"></script>
    <script th:src="@{/plugins/crypto-js/aes.js}"></script>
    <script th:src="@{/plugins/crypto-js/mode-ecb.js}"></script>
    <script th:src="@{/plugins/crypto-js/pad-zeropadding.js}"></script>
    <script th:src="@{/plugins/axios/axios.min.js}"></script>
    <script th:src="@{/plugins/qs/qs.min.js}"></script>
</head>
<body>
<div id="dpLTE">

    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">私钥面板</div>
                    <div class="layui-card-body">
                        <textarea v-model="privkey" rows="10" style="width: 100%;"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">公钥面板</div>
                    <div class="layui-card-body">
                        <textarea v-model="pubkey" rows="10" style="width: 100%;"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">要加密的字符串</div>
                    <div class="layui-card-body">
                        <textarea v-model="toBeEncrypted" rows="15" style="width: 100%;"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">加密后的字符串</div>
                    <div class="layui-card-body">
                        <textarea v-model="encrypted" rows="15" style="width: 100%;"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">解密后的密文</div>
                    <div class="layui-card-body">
                        <textarea v-model="decrypted" rows="15" style="width: 100%;"></textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <button type="button" class="layui-btn layui-btn-fluid" @click="test">加密解密测试</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-bg-gray" style="padding: 30px;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <button type="button" class="layui-btn layui-btn-fluid" @click="encryptedTest">加密测试</button>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <button type="button" class="layui-btn layui-btn-fluid" @click="decryptedTest">解密测试</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
<script type="module" th:src="@{/js/jsencrypt.js}"></script>
</html>